import { Button, Layout } from "antd";
import React, { useState } from "react";
import styles from './index.module.less'
import { DownOutlined, UpOutlined } from '@ant-design/icons';
const { Header, Content } = Layout
const animation = () => {
    const [flag, setFlag] = useState(true)
    const text = flag ? '展开' : '收起'
    const Iconfont = flag ? DownOutlined : UpOutlined
    return <Layout className={styles.layout}>
        <Header className={styles.layout__header} style={{ height: flag ? 50 : 150 }}>
            <Button icon={<Iconfont />} onClick={() => setFlag(!flag)}>{text}</Button>
        </Header>
        <Content className={styles.layout__content}>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere voluptatibus unde veritatis laudantium dolore cumque doloribus nesciunt suscipit hic mollitia debitis, veniam numquam quia eius harum repellendus corporis quos amet!
            Architecto, provident perferendis minus excepturi commodi at, totam similique nobis omnis, repellendus sequi optio. A iste sed velit sit facilis natus, quod eaque est hic culpa excepturi, in labore tempore?
            Vel alias officia voluptatum, eveniet sapiente totam suscipit, aut reprehenderit velit voluptate neque iure quis, nobis sit obcaecati voluptates blanditiis explicabo laudantium facilis qui! Omnis ipsum explicabo officiis dolores dolore.
            Iure dolorem quibusdam quasi dolores ea provident reprehenderit animi quae inventore nesciunt, dolorum quo consequatur, voluptas ab eligendi. Nisi, amet tenetur. Nesciunt quis, suscipit laboriosam porro perferendis velit labore alias.
            Soluta dicta magnam alias fugiat totam. Eaque, non dolorem distinctio quos maiores modi quas hic eius fugit quasi? Error eveniet ipsam atque enim odit quibusdam. Eligendi repellat iusto a consequuntur!
            Laboriosam temporibus eum atque cumque repellendus error repellat reiciendis praesentium aperiam, commodi quos nihil unde rem dolor tenetur natus accusamus dolorum harum eius in. Doloribus distinctio quod assumenda unde fugit?
            Quis, iure architecto sit exercitationem magni repudiandae mollitia deserunt suscipit? Blanditiis perspiciatis dolor maiores, dolorem repellendus quidem, nobis laudantium suscipit iste rem quasi atque veritatis non quia placeat, libero dolores?
            Pariatur neque aspernatur magni maxime debitis fugit et. Ipsum dolorum accusantium, id, facilis ea saepe a accusamus aliquid consectetur provident adipisci magni. Eveniet nulla facere enim ullam sit adipisci cumque!
            Ipsa facere dolores non exercitationem culpa! Animi eos reiciendis voluptates, velit eligendi tempora sunt consequuntur esse. Porro, sunt veritatis maxime iure labore quibusdam, quo quisquam laboriosam ab quaerat vitae quis?
            Dolorem similique, odio ex natus expedita reiciendis cum provident ipsum beatae possimus est voluptas? Temporibus in, rerum debitis hic maiores repudiandae, possimus beatae ea quaerat et repellat numquam aliquid. Nobis.
            Perferendis repellendus ullam consequatur quo nemo perspiciatis id quod deleniti possimus, ex quos, cumque incidunt veritatis laudantium explicabo dignissimos vitae laboriosam quisquam at itaque. Optio nihil animi aliquid dolorum reiciendis?
            Pariatur aut placeat id atque nam asperiores distinctio corrupti officia laudantium. Temporibus molestias commodi rerum quis non, ipsum quas, et eius esse expedita veritatis maxime earum. Facilis nam sunt ea!
            Earum quo tempora pariatur non est eligendi mollitia sapiente enim consequatur vel architecto facilis, atque reprehenderit voluptatem fugiat eaque ducimus maxime odit dolorum sequi. Labore dignissimos est perferendis sequi minus.
            Tempore tempora eaque earum consequuntur est quo mollitia, voluptas excepturi, non quia nostrum. Consequatur quaerat ad sapiente harum delectus repellendus, magnam rerum molestias, cumque laboriosam odio iure tempore. Hic, aspernatur?
            Impedit assumenda, saepe fugiat architecto quia culpa quam quasi voluptates nisi natus suscipit minus aut magni adipisci quos asperiores eos debitis ad mollitia harum, sequi molestias perspiciatis! Aspernatur, dolore aperiam.
            Voluptate cum veniam vel at eligendi dolore, assumenda reprehenderit exercitationem odit ea magni veritatis repellendus dolor doloremque eius eum, illo animi alias repellat! Provident illum quaerat repellendus error quos quibusdam?
            A placeat vero aperiam quod qui consequuntur quas molestiae voluptate rerum iure deleniti mollitia facilis doloremque, sed voluptatem atque, amet aut obcaecati optio dicta? Tenetur sequi sed quo praesentium deleniti.
            Doloremque odit officia, numquam temporibus aspernatur libero atque repellat ut est odio quo maxime totam praesentium enim ipsum nulla, esse quisquam sapiente laborum cumque. Distinctio delectus laborum modi inventore architecto!
            Beatae commodi exercitationem, illo aut accusamus qui non at ipsam consequuntur aliquid aliquam pariatur odit porro, dolorem praesentium laboriosam harum necessitatibus expedita dignissimos voluptates dolore? Veniam labore non illum dolorem?
            Nobis quos voluptas quam accusamus impedit! Tenetur, ipsa nulla officiis illum molestiae quae deserunt necessitatibus aspernatur numquam eius reiciendis ab cupiditate rem fuga pariatur dicta nesciunt ducimus nobis nostrum. Voluptate.
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque harum exercitationem recusandae non dolor provident, alias minima eligendi pariatur placeat quae quidem fugit velit unde cum quibusdam error rerum quod.
            Dicta, ipsa! Molestiae placeat facere aliquid quidem dolorum. Consequuntur culpa officiis repellendus ea nihil accusamus ipsam deleniti eligendi corporis. Hic pariatur dignissimos nam corrupti totam ipsa exercitationem, aut voluptatum sequi.
            Sunt ipsum debitis, commodi quisquam aliquam quae temporibus libero atque voluptate? Est enim earum explicabo tempora! Maxime, quas, earum ducimus ratione culpa iusto voluptatum corporis optio voluptas mollitia illo amet!
            Ex similique unde ipsum mollitia amet, dolore et at, ad nobis accusantium, nostrum rerum quos labore quae culpa. Unde voluptates accusantium delectus cum harum animi dolorem reprehenderit illum odio dolor?
            Facilis consequuntur necessitatibus perspiciatis velit saepe mollitia quo perferendis non dolorum commodi deleniti repudiandae culpa, delectus nobis? Dicta impedit esse minus, saepe illo nisi, harum hic itaque voluptatibus veniam odit?
            Non ipsam, nulla fuga pariatur iste neque dolores, nobis tempora esse, earum recusandae adipisci? Vitae neque pariatur alias eum maiores dolorum, non sit quod vero delectus, eius officiis! Atque, magni!
            Dolor facilis adipisci, molestias praesentium necessitatibus, modi enim eum fugiat obcaecati, eveniet iste quod! Perspiciatis, fuga nemo a quae repellat modi ad quaerat enim dolore cumque ullam incidunt. Dolores, sapiente!
            Atque, asperiores quas beatae autem nisi tenetur natus aspernatur impedit illum itaque dolorum sint doloribus in unde perferendis quisquam veniam non voluptas totam? Iusto, excepturi deleniti totam sapiente unde ipsa.
            Laboriosam dolores velit alias, facere quaerat obcaecati omnis eius magnam laudantium debitis quis. Dolorem, assumenda cumque odio suscipit itaque dolore enim nam porro doloribus debitis tempora veritatis voluptatum aliquam ducimus?
            Mollitia soluta, debitis autem quia ratione ex magni aliquid ea sit, eos rerum eaque perferendis perspiciatis est numquam sapiente obcaecati illo corrupti expedita aliquam iure quod dicta. Similique, aliquid. Fugit.
            Illo laudantium repellendus nostrum quam consequatur dolor harum odit voluptatibus accusamus atque ut deserunt nisi est cum necessitatibus ducimus, perspiciatis ratione eveniet obcaecati beatae molestiae laborum consequuntur. Nobis, adipisci et!
            Dolore esse repellat nulla reprehenderit voluptas non dolorum earum quae, veritatis autem sit dolores itaque tenetur quasi explicabo eius, asperiores consequuntur qui iusto eum tempore dignissimos adipisci voluptatum illum. Ipsam?
            Nobis commodi corporis consectetur ducimus. Quae dolore nisi veniam commodi in quas vel, numquam eum quis placeat eius optio laboriosam iure tenetur esse dolor nostrum officiis nam, dicta sed magnam.
            Sed ea et praesentium, facere numquam nostrum, hic dolor ipsam illum deleniti fugit magni totam unde molestiae corporis optio sit ipsa deserunt dolorum sunt placeat alias! Tempora repudiandae ullam consequuntur?
            Explicabo eaque, sed quo esse temporibus nihil eos quam minima ullam eveniet ratione. Vero debitis quo quos. Ullam esse nam dolor est aspernatur laboriosam at accusamus exercitationem modi? Ea, in!
            Repudiandae, natus reiciendis error nam quam suscipit ratione facilis, quibusdam exercitationem, recusandae consectetur in voluptatum id doloremque veniam. Corporis atque hic esse id est voluptatum aliquam beatae modi voluptatibus doloremque.
            Laboriosam hic quasi eos ut provident voluptas pariatur, earum dolores minus quibusdam eius nulla sit. Ullam ratione in vitae nulla dignissimos rem, id aperiam nobis dolore officia eligendi soluta maxime.
            Vitae error incidunt optio officiis fugit quae alias adipisci! Architecto nulla, quae aspernatur ipsa quos debitis! Magnam inventore at nostrum dolores debitis delectus? Dolorem, error ab. Laudantium officiis dolores repudiandae!
            Sequi perferendis, itaque tempora consequuntur iure quas quia, soluta, voluptate nisi mollitia fugiat? Numquam assumenda velit, quia mollitia doloremque natus voluptate optio est voluptas sequi, repellat explicabo harum omnis totam!
            Nulla nihil nostrum odit! Assumenda perferendis corrupti architecto vitae, distinctio itaque unde quibusdam nulla ex impedit nobis quas explicabo vero, sit magnam quos quae omnis beatae obcaecati. Iure, eius quasi!
        </Content>
    </Layout>
}

export default animation